<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref,watch } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
    s1Data: {
        type: Array,
        default: () => [],
    },
})

// const linexData = ref([
//     '呼和浩特市',
//     '包头市',
//     '鄂尔多斯市',
//     '乌兰察布市',
//     '乌海市',
//     '巴彦淖尔',
//     '阿拉善盟',
//     '兴安盟',
//     '通辽市',
//     '赤峰市',
//     '呼伦贝尔市',
//     '锡林郭勒盟',
// ])
// const linesData = ref([237, 103, 479, 236, 479, 200, 234, 143, 345, 256, 89, 228])
// const linesData1 = ref([237, 105, 471, 236, 479, 189, 234, 123, 345, 246, 89, 199])
// let data = {
//     chart: [
//         {
//             month: '2016',
//             value: 138,
//             ratio: 14.89,
//         },

//         {
//             month: '2017',
//             value: 114,
//             ratio: 79.49,
//         },

//         {
//             month: '2018',
//             value: 714,
//             ratio: 75.8,
//         },

//         {
//             month: '2019',
//             value: 442,
//             ratio: 19.8,
//         },

//         {
//             month: '2020',
//             value: 622,
//             ratio: 44.5,
//         },

//         {
//             month: '2021',
//             value: 528,
//             ratio: 87.3,
//         },
//         {
//             month: '2022',
//             value: 528,
//             ratio: 87.3,
//         },
//     ],
// }

// //  x轴数据          象形柱图数据  折线图数据
// let xAxisMonth = [],
//     barData = [],
//     lineData = []
// for (let i = 0; i < data.chart.length; i++) {
//     xAxisMonth.push(data.chart[i].month)
//     barData.push({
//         name: xAxisMonth[i],
//         value: data.chart[i].value,
//     })
//     lineData.push({
//         name: xAxisMonth[i],
//         value: data.chart[i].ratio,
//     })
// }
// console.log( ' props.xData',props.xData);
// var xdata = props.xData
// var data =props.sData
// var data1 = [85, 36, 92, 56, 123, 36, 45]
// var maxArr = [100, 100, 100]
const option = {
	    tooltip : {
	        trigger: 'item',
	        formatter: "{b} : {c} ({d}%)"
	    },
	    color:['#F3D5B7','#01FBBB','#00AAFF','#ffcc00'],
	    // legend: {
	    //     orient: 'vertical',
	    //     x: 'right',
	    //     data: ['准时','迟到','请假','未到'],
	    //     formatter:function(name){
	    //     	var oa = option.series[0].data;
	    //     	var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
	    //     	for(var i = 0; i < option.series[0].data.length; i++){
        //             if(name==oa[i].name){
        //             	return name + '     ' + oa[i].value + '     ' + (oa[i].value/num * 100).toFixed(2) + '%';
        //             }
	    //     	}
	    //     }
	    // },
        
        legend: {
            icon: 'circle',
            x: 'center',
            y: '80%',
            // data: ['一月', '二月', '三月'],
            textStyle: {
                color: '#fff',
            },
            type: 'scroll'
        },
    grid: {
        left: '4%',
        right: '4%',
        bottom: '20px',
        top: '15%',
        // containLabel: true,
    },
	    series : [
	        {
	            // name: '签到比例分析',
	            type: 'pie',
	            radius : '35%',
	            center: ['50%', '50%'],
	            data:[
	                {value:290, name:'2020年'},
	                {value:243, name:'2019年'},
	                {value:19, name:'2018年'},
	                {value:1, name:'2017年'}
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            },
	            itemStyle: {
	                normal: {
	                    label:{ 
                            show: true, 
                            color:'#fff',
        formatter: function (parms) {
            var str = parms.name  +"：" + parms.data.value + "\n" 
                "占比：" + parms.percent + "%";
            return str;
        }
        
                            
                        }
	                },
                    labelLine :{show:true}
	            }
	        }
	    ]
	}
const chart = ref()

// watch(props.xData, (count, prevCount) => {
//     chart.value.removeAttribute('_echarts_instance_')
//     const myChart = echarts.init(chart.value)
//     myChart.setOption(option)
// })
onMounted(() => {
    // setTimeout(()=>{
        
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    // },500)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
